<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '40%'
    },
    height: {
      type: String,
      default: '150px'
    },
    texts: {
      type: Number,
      default: 0,
    },
    colors: {
      type: Array,
      default: () => ["#27D9C8", "#D8D8D8"]
    },
    dataList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null,
      textTitle: '',
      color: [],
      data: [],

    }
  },
  watch: {
    texts: {
      handler(val) {
        this.textTitle = val;
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true,
    },
    dataList: {
      handler(val) {
        this.data = val;
        console.log(val,'val');
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true,
    },
    colors: {
      handler(val) {
        this.color = val;
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      // 指定图表的配置项和数据
      var option = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: "{a} <br/>{b}: {c} ({d}%)"
        // },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        color: this.colors,
        title: {
          text: this.textTitle + '%',
          left: "center",
          top: "center",
          textStyle: {
            color: "#303133",
            fontSize: 26,
            align: "center"
          }
        },
        graphic: {
          type: "text",
          left: "center",
          top: "40%",
          style: {
            text: "",
            textAlign: "center",
            fill: "#333",
            fontSize: 20,
            fontWeight: 700
          }
        },
        series: [
          {
            name: '运动情况',
            type: 'pie',
            radius: ['60%', '70%'],

            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },

            },

            data: this.data
          }
        ]
      };

      this.chart.setOption(option)
    }
  }
}
</script>
